<template>
	<view class="content">
		<view class="headBox">
			<image :src="baseurl+'project/test.png'" class="avatar"></image>
			<text class="name">社群名字</text>
			<text class="info">成员222人&ensp;&ensp;/&ensp;&ensp;发帖30篇</text>
		</view>
		<view class="userBox">
			<image :src="baseurl+'association/headBg.jpg'" class="avatar"></image>
			<text class="name">某帖子的标题某名称展示</text>
			<image :src="baseurl+'association/qunzhu.png'" class="badge"></image>
		</view>
		<text class="descBox">某帖子的标题某名称展示</text>
		<image :src="baseurl+'association/qunzhu.png'" class="qrcode"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				content:''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.$request.get(`Community/community_article_list?id=${this.id}`).then(res => {
				this.content = res.data.data;
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.qrcode{
		width: 138rpx;
		height: 138rpx;
		margin-left: 78rpx;
		margin-top: 555rpx;
	}
	.descBox {
		display: block;
		width: 440rpx;
		height: 270rpx;
		font-size: 22rpx;
		font-weight: 500;
		line-height: 44rpx;
		margin-top: 30rpx;
		margin-left: 234rpx;
		overflow: hidden;
	}
	.userBox {
		margin-top: 52rpx;
		margin-left: 234rpx;
		display: flex;
		align-items: center;

		.badge {
			width: 48rpx;
			height: 24rpx;
			margin-left: 20rpx;
		}

		.name {
			font-size: 26rpx;
			font-weight: 700;
			margin-left: 32rpx;
		}

		.avatar {
			width: 52rpx;
			height: 52rpx;
			border-radius: 50%;
		}
	}

	.headBox {
		width: 750rpx;
		height: 240rpx;

		.info {
			position: absolute;
			font-size: 24rpx;
			font-weight: 500;
			top: 148rpx;
			left: 206rpx;
		}

		.name {
			position: absolute;
			font-size: 40rpx;
			font-weight: 700;
			top: 82rpx;
			left: 206rpx;
		}

		.avatar {
			position: absolute;
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			top: 65rpx;
			left: 40rpx;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
		background: url('https://miantou.guguan.net/img/association/invitePosterBg.jpg');
		background-size: 100% 100%;
		overflow: hidden;
	}
</style>